<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>所有节点 | STAT HUB</title>
	<link type="text/css" rel="stylesheet" href="resource/css/framework.css" />
	<link type="text/css" rel="stylesheet" href="resource/css/main.css" />
	<link type="text/css" rel="stylesheet" href="resource/css/jquery.alerts.css" media="screen" />
	<script type="text/javascript" src="resource/javascript/jquery.min.js"></script>
	<script type="text/javascript" src="resource/javascript/jquery-ui.min.js"></script>
	<script type="text/javascript" src="resource/javascript/jquery.alerts.js"></script>
	<script type="text/javascript" src="resource/javascript/stathub.js"></script>
</head>
<body>
	<div class="page">
		<!--header begin-->
		<header>
			<div class="bigcontainer">
				<div id="logo">
					<a href="/">STAT HUB 应用管理</a>
				</div>
				<div class="user">
					<div class="ui compact notif menu">
						<a class="item" href="notifications.html">
							<i class="mail large icon"></i>
							<span id="message_count" class="circular floating ui small red label"></span>
						</a>
					</div>
					<div class="ui icon top right dropdown">
						<a href="user_profile.html">
							<img class="ui avatar image" src="resource/images/avatar-default.gif"/>
							欢迎，管理员
						</a>
					</div>
				</div>
			</div>
		</header>
		<!-- the main menu-->
		<div class="ui teal inverted menu">
			<div class="bigcontainer">
				<div class="right menu">
					<a class="item" href="/"><i class="home icon"></i>管理首页</a>
					<a class="active item" href="node_list.html"><i class="sitemap icon"></i>节点</a>
					<a class="item" href="app_list.html"><i class="cloud icon"></i>应用</a>
					<a class="item" href="help.html"><i class="help icon"></i>帮助</a>
					<a class="item" href="api_doc.html"><i class="info icon"></i>API接口</a>
				</div>
			</div>
		</div>
		<!--the main content begin-->
		<div class="container">
			<!--the content-->
			<div class="ui grid">
				<!--the vertical menu-->
				<div class="four wide column">
					<div class="verticalMenu">
						<div class="ui vertical pointing menu fluid">
							<a class="active teal item" href="node_list.html">
								<i class="plane icon"></i> 所有节点
							</a>
							<a class="item" href="node_stat.html">
								<i class="bar chart icon"></i> 节点统计
							</a>
						</div>
					</div>
				</div>
				<!--the App list-->
				<div class="twelve wide column">
					<div class="pageHeader">
						<div class="segment">
							<h3 class="ui dividing header">
								<i class="large plane icon"></i>
								<div class="content">
									所有节点
									<div class="sub header">
										符合搜索条件的节点 <span id="totalCount"></span> 个，
										共 <span id="pageCount"></span> 页，这是第 <span id="pageIndex"></span> 页
									</div>
								</div>
							</h3>
						</div>
					</div>
					<div class="ui vertical segment">
						<a class="ui blue small labeled icon add button" href="help.html#5.1.2" target="blank"><i class="help icon"></i>了解节点检索语法</a>
						<div class="ui small icon input right">
							<input id="node_name" type="text" value="*" placeholder="输入搜索条件">
							<i id="search_button" class="search icon"></i>
						</div>
					</div>
					<div id="nodeList"></div>
					<div id="pagination" class="ui pagination menu"></div>
				</div>
			</div>
		</div>	
	</div>
	<!--footer begin-->
	<footer>
		<div id="copyrights">
			<div class="inset">
				<div class="bigcontainer">
					<div class="fl">
						<div class="logo"></div>
						<p>&copy; 2014 lane.cn@gmail.com <a href="https://github.com/lane-cn/stat" target="_blank">https://github.com/lane-cn/stat</a></p>
					</div>
				</div>
			</div>
		</div>
	</footer>
	<script>
	var PAGE_SIZE = 10;
	$(document).ready(function() {
		$('#search_button').click(function() {
			show_nodes(0);
		});
		show_nodes(0);
		setInterval(function() {
			show_stats();
		}, 5000);
	});
	
	function show_nodes(from) {
		$("#nodeList").empty();
		var query = $('#node_name').val();
		if (!query) {
			query = '*';
			$('#node_name').val(query);
		}
		var size = PAGE_SIZE;
		$.ajax({
			url: '/v1/node/_search?from=' + from + '&size=' + size,
			type: 'POST',
			contentType: 'application/json',
			data: query,
			dataType: 'json',
			success: function(data, status, xhr) {
				show_pagination(data.total, from, size);
				for (i = 0; i < data.rows.length; i++) {
					$("#nodeList").append(get_node_html(data.rows[i]));
				}
				show_stats();
			},
			error: function(xhr, status, error) {
				jAlert('查询失败，状态：' + error + ', 信息: ' + xhr.responseJSON.message, '错误');
			}
		});
	}
	
	function show_pagination(total, from, size) {
		var page_count = total % size == 0 ? total / size : Math.floor(total / size) + 1;
		var page_index = from / size + 1;
		$('#totalCount').text(total);
		$('#pageCount').text(page_count);
		$('#pageIndex').text(page_index);
		$("#pagination").empty();
		
		//show last page
		if (page_index == 1) {
			$('#pagination').append('<a class="icon item"><i class="icon left arrow"></i></a>');
		} else {
			$('#pagination').append('<a class="icon item" onclick="show_nodes(' + (from - size) + ')"><i class="icon left arrow"></i></a>');
		}
		
		var max_pos = 3;
		var start = 1;
		var start_dis = false;
		if (page_index - start > max_pos) {
			start = page_index - max_pos;
			start_dis = true;
		}
		
		var end = page_count;
		var end_dis = false;
		if (end - page_index > max_pos) {
			end = page_index + max_pos
			end_dis = true;
		}
		
		if (start_dis) {
			$('#pagination').append('<div class="disabled item">...</div>');
		}
		
		//show page index
		for (var i=start; i<=end; i++) {
			if (i == page_index) {
				$('#pagination').append('<a class="active item">' + i + '</a>');
			} else {
				$('#pagination').append('<a class="item" onclick="show_nodes(' + ((i - 1) * size) + ')">' + i + '</a>');
			}
		}
		
		if (end_dis) {
			$('#pagination').append('<div class="disabled item">...</div>');
		}

		//show next page
		if (page_index == page_count) {
			$('#pagination').append('<a class="icon item"><i class="icon right arrow"></i></a>');
		} else {
			$('#pagination').append('<a class="icon item" onclick="show_nodes(' + (from + size) + ')"><i class="icon right arrow"></i></a>');
		}
	}
	
	function show_stats() {
		var node_ids = get_keys();
		$.each(node_ids, function(i, node_id) {
			show_stat(node_id);
		});
	}
	
	function show_stat(node_id) {
		$.get('/v1/node/' + node_id, function(node, status, xhr) {
			//node status
			set_button_status(node_id, node.agentAddress);
			
			//status display
			var stat = '';
			if (node.agentAddress) {
				stat = '<a href="' + node.agentAddress + '" target="_blank"><span class="ui type label green">在线</span></a>';
			} else {
				stat = '<span class="ui type label red">离线</span>';
			}
			$('#stat_' + node.id).html(stat);
		});
	}
	
	function set_button_status(node_id, agent_address) {
		//alert(node_id);
		if (agent_address) {
			$('#oper_' + node_id).show();
			$('#edit_' + node_id).show();
		} else {
			$('#oper_' + node_id).hide();
			$('#edit_' + node_id).hide();
		}
	}
	
	function get_node_html(node) {
		var ip = new Array();
		for (var i=0; i<node.networks.length; i++) {
			ip[i] = node.networks[i].address;
		}
		var cpus = node.os.cpus;
		var mem = node.memory.total;
		var disk = 0;
		for (var i=0; i<node.disks.length; i++) {
			disk += node.disks[i].total;
		}
		var stat = '';
		if (node.agentAddress) {
			stat = '<a href="' + node.agentAddress + '" target="_blank"><span class="ui type label green">在线</span></a>';
		} else {
			stat = '<span class="ui type label red">离线</span>';
		}
		var html = '<div id="node_div_' + node.id + '" class="ui app two column middle aligned vertical grid segment">';
		html += '<div class="ui message hidden node_key">' + node.id + '</div>';
		html += '<div class="column verborder">';
		html += '<div class="ui info segment">';
		html += '<h5 class="ui header">' + node.hostname + ' <span id="stat_' + node.id + '">' + stat + '</span></h5>';
		html += '<p>系统：<span id="os_' + node.id + '">' + node.os.name + ' ' + node.os.version + ' ' + node.os.architecture + '</span></p>';
		html += '<p>地址：<span id="address_' + node.id + '">' + ip + '</span></p>';
		html += '<p>资源：<span id="res_' + node.id + '">' + cpus + ' 核CPU, ' + byteCountToDisplaySize(mem) + ' 内存, ' + byteCountToDisplaySize(disk) + ' 磁盘</span></p>';
		html += '<p>标签：<span id="tag_' + node.id + '">' + node.tags + '</span></p>';
		html += '</div>';
		html += '</div>';
		html += '<div class="center aligned column">';
		html += '<div class="ui buttons">';
		html += '<a id="oper_' +  node.id + '" class="ui tiny blue button hidden" href="./node.html?id=' + node.id + '"><i class="setting icon"></i>管 理</a>';
		html += '<a id="edit_' +  node.id + '" class="ui tiny basic button hidden" href="./edit_node.html?id=' + node.id + '"><i class="edit icon"></i>修 改</a>';
		html += '</div>';
		html += '</div>';
		html += '</div>';
		return html;
	}
	
	function get_keys() {
		var keys = new Array();
		var ctls = $('.node_key');
		if (ctls) {
			for (var i = 0; i < ctls.length; i++) {
				var ctl = ctls[i];
				keys.push(ctl.innerHTML);
			}
		}
		return keys;
	}

	
	</script>
</body>
</html>
